<template>
  <div id="temp">
    <!--轮播图抽取-->
    <!--轮播图使用mint-ui的swiper组件实现-->
    <!--发送网络请求请求图片数据 -->
    <mt-swipe :auto="2000" :show-indicators="false" @change="handleChange">
      <mt-swipe-item v-for="(item,index) in imgs" :key="index">
        <img :src="item.src" alt="">
      </mt-swipe-item>

    </mt-swipe>
    <div class="dot-cont">
      <ul>
        <li v-for="(item,index) in dot" class="item" :class="{active:currentindex===index}">{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    //接受父组件传入的数据
    data() {
      return {
        dot: [],
        currentindex: 0
      }
    },
    props: ['imgs'],
    mounted() {
      this.initdot()

    },
    methods: {
      initdot() {
        setTimeout(()=>{
          this.$nextTick(() => {
            this.dot = new Array(this.imgs.length)
            console.log(this.dot);
          })

        },20)
      },
      handleChange(index) {
        console.log(index);
        this.currentindex = index;

      }
    }

  }
</script>

<style lang="less">
  #temp {
    /*轮播图样式*/
    .mint-swipe {
      height: 4rem;
      margin-top: 40px;
    }

    .mint-swipe-item img {
      height: 4rem;
      width: 100%;
    }

    .mint-swipe-item {
      width: 100%;
    }

    .mint-swipe-indicators {
      position: absolute;
      bottom: 10px;
      left: 80%;
    }
    .dot-cont {
      text-align: center;
      ul {
        margin: 0 auto;
        //  background: #ccc;
        width: 65px;
        height: 10px;
      }
      .item {
        width: 8px;
        height: 8px;
        background: red;
       // float: left;
        display: inline-block;
        //margin-right: 10px;
        margin: 0 4px;
      }
      .active{
        width: 20px;
        border-radius: 5px;

      }

    }

  }

</style>
